{% extends "layout.html" %}

<!-- Page for editing Rhasspy profile JSON directly -->

{% block body %}
<div class="text-muted pl-1">
    <p>
        You can edit <a href="{{ url_prefix }}/docs/profiles/" target="_blank">your Rhasspy profile</a> directly here as JSON.
        Only settings that <strong>differ from the defaults</strong> are shown.
    </p>
</div>
<div class="form-group">
    <div class="form-row">
        <button onclick="saveProfile()" x-bind:class="{ 'btn-danger': isDirty }" class="btn btn-primary">Save Profile</button>
    </div>
</div>

<div class="form-group">
    <div class="form-row">
        <textarea id="profileJson" x-model="localProfileJson.value" x-bind:class="{ 'border-danger': isDirty }" class="form-control code" style="border-width: 3px" type="text" rows="25" @input="isDirty = true"></textarea>
    </div>
</div>

<div class="form-group">
    <div class="form-row">
        <button onclick="saveProfile()" x-bind:class="{ 'btn-danger': isDirty }" class="btn btn-primary">Save Profile</button>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">
 var isDirty = false;

 // POST to /api/profile to save and then restart Rhasspy
 function saveProfile() {
     rhasspy.postBusy('Saving profile',
                      '/api/profile',
                      rhasspy.localProfileJson.value,
                      false)
            .done(function() {
                isDirty = false;

                if (window.confirm("Profile saved. Restart Rhasspy?")) {
                    rhasspy.restart();
                } else {
                    rhasspy.hideBusy();
                }
            });
 }

 window.onbeforeunload = function() {
     if (isDirty) {
         // Warn user before leaving page
         return 'Profile was not saved. Are you sure?"'
     }
 }
</script>
{% endblock %}
